<script setup>

import { useRouter } from 'vue-router';
import CarBox from '@/components/ManagerCars/CarBox.vue'
import { onMounted, ref } from 'vue';
import { getCarsInfoFn } from '@/api/managercars';
const router = useRouter()


// 跳转至添加路线
function pushClick() {
	router.push({ name: 'routepush' })
}

const carsInfo = ref({})
// 获取司机数据
onMounted(() => {
	getCarsInfoFn().then((res) => {
		carsInfo.value = res.data.carsInfo
	})
})

</script>
<template>

	<!-- 头部 -->
	<div class="top">
		<div class="left"> 车辆管理</div>
		<div class="right"> <svg t="1731912484050" class="icon" viewBox="0 0 1024 1024" version="1.1"
				xmlns="http://www.w3.org/2000/svg" p-id="4291"
				data-spm-anchor-id="a313x.search_index.0.i1.3a553a81KNSW66" width="20" height="20">
				<path
					d="M704 192a106.666667 106.666667 0 0 1 106.666667 106.666667v469.333333a106.666667 106.666667 0 0 1-106.666667 106.666667H320a106.666667 106.666667 0 0 1-106.666667-106.666667V298.666667a106.666667 106.666667 0 0 1 106.666667-106.666667 21.333333 21.333333 0 1 0 0-42.666667 149.333333 149.333333 0 0 0-149.333333 149.333334v469.333333a149.333333 149.333333 0 0 0 149.333333 149.333333h384a149.333333 149.333333 0 0 0 149.333333-149.333333V298.666667a149.333333 149.333333 0 0 0-149.333333-149.333334 21.333333 21.333333 0 0 0 0 42.666667z"
					fill="#ffffff" p-id="4292"></path>
				<path
					d="M320 554.666667a21.333333 21.333333 0 0 1 0-42.666667h384a21.333333 21.333333 0 0 1 0 42.666667H320z m0-128a21.333333 21.333333 0 0 1 0-42.666667h384a21.333333 21.333333 0 0 1 0 42.666667H320z m0 256a21.333333 21.333333 0 0 1 0-42.666667h384a21.333333 21.333333 0 0 1 0 42.666667H320zM405.333333 192h213.333334a21.333333 21.333333 0 0 0 0-42.666667H405.333333a21.333333 21.333333 0 0 0 0 42.666667z"
					fill="#ffffff" p-id="4293"></path>
			</svg>订单</div>
	</div>
	<div class="content">
		<car-box :cars-info="carsInfo"></car-box>


		<van-button class="push" @click="pushClick" :color="'#1678ff'" round>发布新线路</van-button>
	</div>


</template>
<style lang="scss" scoped>
.content {
	flex: 1;
	overflow: auto;


}

.top {
	background-color: #1678ff;
	color: wihte;
	display: flex;
	justify-content: space-between;
	height: 0.6rem;
	align-items: center;
	box-sizing: border-box;
	padding: 0 15px;

	.left {
		font-size: 18px;
	}

	.right {
		font-size: 16px;
		display: flex;
		align-items: center;
	}
}

// 添加按钮
.push {
	width: 90%;
	margin: 0 5%;
	margin-top: 40px;
	margin-bottom: 20px;
}
</style>